<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的预定页面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/css/element/index.css">
    <!-- import Vue before Element -->
    <script src="/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="/js/element/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: whitesmoke;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        /**/
    </style>
</head>
<body style="margin: 0">
<div id="app">
    <el-container>
        <el-header style="padding-left: 0;padding-right: 0">
            <!--导航栏-->
            <el-menu :default-active="'2'"
                     class="el-menu-demo"
                     mode="horizontal"
                     background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="1" onclick="javascript:location.href='index.html'">首页</el-menu-item>
                <el-menu-item index="2" onclick="javascript:location.href='myreserve.html'">我的预约</el-menu-item>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">访问官网</a></el-menu-item>
            </el-menu>
        </el-header>

        <el-container>
            <el-aside width="15%"></el-aside>
            <el-main>
                <el-alert v-if="reserved" v-bind:title="title1" type="success" show-icon></el-alert>
                <el-alert v-if="!reserved" v-bind:title="title2" type="info" show-icon></el-alert>
                <el-divider></el-divider>
                <!--栅格-->
                <el-row :gutter="20">
                    <el-col :offset="6" :span="6">
                        <div style='font-size:32px;font-family: Helvetica Neue;border-radius:12px;background-color:lightskyblue;box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2)'>
                            预约有效时间<br>
                            <i class="el-icon-time"></i>
                            <span>{{timeStr}}</span>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <el-progress type="circle" :percentage="100 * time/totalTime" status="success" style=""></el-progress>
                    </el-col>
                </el-row>

                <el-divider></el-divider>
                <el-button type="primary" icon="el-icon-arrow-left" onclick="javascript:location.href='reserve.html'">
                    预约车位页面
                </el-button>
                <el-button type="info" onclick="javascript:location.href='path.html'">停车引导页面<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-main>
            <el-aside width="15%"></el-aside>
        </el-container>

        <el-footer>© 2020 中国地质大学（武汉） .Powered by CUG. | 服务器状态 | Donate</el-footer>
    </el-container>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeNames: ['2'],
            //
            reserved: null,
            reservedSpace: null,
            title1: "请按照引导路线停入4号车位（预约到期时间  ）",
            title2: "您未预约车位或预约已过期",
            //
            totalTime: 1 * 60,
            time: 0,
            timeStr: "0:00",
            //
            timerId: null
        },
        methods: {
            getReserveInfo: function () {
                var that = this;
                axios.get("/park/reserveInfo").then(function (response) {
                    if (response.data.flag) {
                        that.reservedSpace = response.data.res;
                        that.title1 = "请按照引导路线停入" + that.reservedSpace.id
                            + "号车位（预约到期时间" + that.reservedSpace.startTime + "）";
                        that.startTimer(new Date(that.reservedSpace.startTime));
                    } else {
                        that.title2 = "您未预约车位或预约已过期";
                    }
                    that.reserved = response.data.flag;
                }, function (err) {
                    console.log(err);
                });
            },
            startTimer: function (startTime) {
                if (this.timerId != null) {
                    clearInterval(this.timerId);
                }
                var now = new Date();
                this.time = Math.trunc((startTime.getTime() - now.getTime()) / 1000);
                var that = this;
                this.timerId = setInterval(function () {
                    if (that.time <= 0) {
                        clearInterval(that.timerId);
                        that.reserved = false;
                        that.reservedSpace = null;
                        return;
                    }

                    that.time--;
                    var time = that.time;
                    var seconds = time % 60
                    var minutes = Math.trunc(time / 60);
                    var hours = Math.trunc(minutes / 60);
                    minutes = minutes % 60;

                    that.timeStr = (hours > 0 ? hours.toString() + ":" : "")
                        + (minutes < 10 ? ('0' + minutes.toString()) : minutes.toString()) + ":"
                        + (seconds < 10 ? ('0' + seconds.toString()) : seconds.toString());
                }, 1000);
            },
        }
    });
    window.onload = app.getReserveInfo();
</script>
</body>
</html>